<!-- 货单明细页 -->
<template>
	<view class="container" :class="{'disabled':disabled==true}">
		<view class="" style="background-color: #fff;">
			<view style="display: flex;padding: 10rpx;" class="customerBtn">
				<button @click="customerChangeClick"
					style="width:100%;display: flex;align-items: center;justify-content: center;">
					<uni-icons type="staff-filled" size="20"></uni-icons>
					<view class="textOverflow">
						{{!customerInfoSelect.cCusName?'请选择客户':customerInfoSelect.cCusName}}
					</view>
				</button>
			</view>
			<view style="height: 60px;"></view>
			<uni-list>
				<uni-list-item v-for="(item,index) in orderDetailListData" :key="index">
					<template v-slot:header>
						<view class="sideRightimage">
							<image v-if="item.Picture" :src="item.Picture" alt="" />
							<image v-else src="/static/none.png" mode="" />
						</view>
					</template>
					<template v-slot:body>
						<view class="slotBody">
							<view class="sideRightTitle" style="">
								<text class="slot-box slot-text">{{item.InventName}}</text>
							</view>
							<view @click="handleChangeClick('修改单价', item,index,)">
								<text style="color:red"><text
										style="font-size: 0.9rem;">￥</text>{{ toThousands(item.Price)}}</text>
							</view>
						</view>
					</template>
					<template v-slot:footer>
						<view class="sideRightFooter">
							<text style="padding-right: 10rpx;text-align: right;flex: 1;"
								@click="handleChangeClick('修改数量', item,index,)">×{{item.Quantity}}</text>

							<button type="warn" size="mini" style="line-height: 1.5;" @click="deleteChange(item,index)">
								<uni-icons size="20" type="trash" color="#fff"></uni-icons>
							</button>
						</view>
					</template>
				</uni-list-item>
				<uni-list-item>
					<template v-slot:footer>
						<view class=""
							style="display: flex;align-items: center;justify-content: space-between;padding: 20rpx 25rpx;">
							<view class="">
								<view>共{{orderDetailListData.length}}件商品, 合计:
									<text style="color:red">￥{{toThousands(totalPrice)}}</text>
								</view>
							</view>
						</view>
					</template>
				</uni-list-item>
			</uni-list>
		</view>


		<view style="height: 120px;"> </view>
		<view v-if="orderDetailListData.length!=0" class="submitButton">
			<view class="" style="display: flex;margin-bottom: 20rpx;">
				<checkbox-group @change="checkboxChangeQianShou($event)" style="margin-right: 50rpx;">
					<label>
						<checkbox :disabled="disabled" style="transform: scale(0.8);" :value="JSON.stringify(true)"
							:checked="isCheckedBoxQianshou" />需要签收
					</label>
				</checkbox-group>
				<checkbox-group @change="checkboxChange($event)">
					<label>
						<checkbox :disabled="disabled" style="transform: scale(0.8);" :value="JSON.stringify(true)"
							:checked="isCheckedBox" />打印
					</label>
				</checkbox-group>
			</view>
			<view class="" style="display: flex;">
				<view class="end-left" style="flex: 6; display: flex;align-items: center;justify-content: center;"
					@click="handleChangeClick('修改总价')">
					<text
						style="color: #f00; font-weight: bold;font-size: 40rpx;">￥{{toThousands(newTotalPrice)}}</text>
				</view>
				<view class="" style="display: flex;flex: 4;">
					<view v-if="isXianshouButton" class="end-center" @click="submitButtonOrderXian('现收')">现收</view>
					<view v-if="isGuazhangButton" class="end-right" @click="submitButtonOrderGua('赊货')">挂账</view>
				</view>
			</view>
		</view>


		<view>
			<!-- 输入框示例 -->
			<!-- <uni-popup ref="inputDialog" type="dialog">
				<uni-popup-dialog ref="inputClose" mode="input" :title="title" :value="inputVlaueKeywords"
					placeholder="请输入内容" @confirm="dialogInputConfirm"></uni-popup-dialog>
			</uni-popup> -->
			<popup :isShow='visible' :bottom='false' @close="visible=false" @cancel="visible=false"
				@confirm="dialogInputConfirm">
				<template v-slot:title>
					<view class="title" style="text-align: center;font-weight: bold;font-size: 38rpx;color:#444">
						{{title}}
					</view>
				</template>
				<template v-slot:body>
					<view class="body" style="padding-top: 50rpx;">
						<input style="border: 1px solid #cccccc;border-radius: 10rpx;height: 70rpx;padding-left:20rpx"
							type="number" placeholder="" v-model="inputVlaueKeywords">
					</view>
				</template>
			</popup>
		</view>

		<!-- 分享模板 -->
		<view>
			<!-- 分享示例 -->
			<uni-popup ref="sharePopup" type="bottom" :animation="true" :maskClick="true" safeArea
				backgroundColor="#fff">
				<view class="" style="height: 550rpx;">
					<view class="" style="display: flex;justify-content: space-between;padding: 25rpx;">
						<text>应付金额: <text style="color:red;padding-left: 10rpx;">￥{{toThousands(newTotalPrice) }}
							</text></text>
					</view>
					<view class="sharePopup">
						<view class="sharePopupItem" v-for="(item,index) in shareListData" :key="index"
							@click="shareChangeClick(item.id)">
							<view class="top" style="position: relative;">
								<span v-if="shareIndex == item.id" style="position: absolute;left: 80rpx;"
									class="icon-success"></span>
								<image style="width: 80rpx;height: 80rpx;" :src="item.url"></image>
							</view>
							<text class="bottom">{{item.title}}</text>
						</view>
					</view>
					<view class="submitPopup" @click="submitNowClick">
						确定
					</view>
				</view>
			</uni-popup>
		</view>

		<Print ref="print" @submitPrintChange="submitPrintChange" @dialogClose="submitPrintDialogClose"></Print>


	</view>

</template>

<script>
	// 引入工具函数
	import {
		toThousands
	} from '../../utils/tool.js'
	import {
		mapMutations,
		mapState
	} from 'vuex'
	import Print from '../../components/print.vue'
	// 引入自定义弹出层组件
	import Popup from '../../components/modal.vue'
	export default {
		components: {
			Print,
			Popup
		},
		data() {
			return {
				toThousands,
				visible: false,
				// 是否禁用
				disabled: false,
				// 是否隐藏现收按钮或者赊货按钮
				isXianshouButton: true,
				isGuazhangButton: true,
				// 是否选中打印下票
				isCheckedBox: false,
				// 是否签收
				isCheckedBoxQianshou: true,

				// 是否显示客户
				isCustomer: false,
				// 分享面板内容
				shareListData: [{
						title: '微信',
						id: 0,
						url: '/static/weixin.png',
					},
					{
						title: '支付宝',
						id: 1,
						url: '/static/zhifubao.png',
					},
					{
						title: '现金',
						id: 2,
						url: '/static/xianjin.png',
					},
					{
						title: '转账',
						id: 3,
						url: '/static/zhuanzhang.png',
					},
					// {
					// 	title: '刷卡',
					// 	id: 4,
					// 	url: '../../static/shuaka1.png',
					// 	width:'43px',
					// }
				],
				inputVlaueKeywords: null,
				title: '修改数量',
				// 修改的产品参数
				objectEdit: {

				},
				Price: "",
				// 是否打印小票
				checked: false,
				// 是否可以编辑总金额
				isShowInput: false,
				// 总计
				totalPrice: 0,
				newTotalPrice: 0,
				// 修改后的总价
				editTotalPrice: null,
				// 订单列表数据信息
				orderDetailListData: [],
				// 传递参数
				queryParmas: {
					// 搜索参数
					Search: {
						// 公司id  后续取公共参数  登录后获取的用户信息
						CommpayId: uni.getStorageSync('CompanyInfo') ? (uni.getStorageSync('CompanyInfo')).Id : "",
					}
				},
				CommpayId: '',
				shareIndex: 0,
				// 客户信息
				customerInfoSelect: {},
				Id: '',
				// 现收还是赊货
				payType: null,
				mac: "",
				// 用来判断是从销售开单进去的还是从小票页面进去货单明细页面的
				titleType: ""

			}
		},
		onLoad(options) {
			// this.titleType= options.title
			this.CommpayId = uni.getStorageSync('CompanyInfo') ? (uni.getStorageSync('CompanyInfo')).Id : "";
			// if(options.CommpayId && options.customer){
			// 	this.CommpayId =options.CommpayId
			// }else{
			// 	this.CommpayId = uni.getStorageSync('CompanyInfo') ? (uni.getStorageSync('CompanyInfo')).Id : "";
			// 	console.log('获取options是否有值获取options是否有值获取options是否有值',	this.titleType)
			// }
			this.titleType = options.title
			if (options.CommpayId && options.customer) {
				this.CommpayId = options.CommpayId
			} else {
				this.CommpayId = uni.getStorageSync('CompanyInfo') ? (uni.getStorageSync('CompanyInfo')).Id : "";
			}
		},
		onShow() {
			// 获取订单列表数据
			this.getOrderDetailListData()

			// 缓存获取用户信息
			// this.customerInfoSelect = uni.getStorageSync('customerInfoSelect')
			// if (this.customerInfoSelect) {
			// 	this.isCustomer = true
			// } else {
			// 	this.isCustomer = false
			// }
			// console.log('缓存获取过来用户', this.customerInfoSelect)
			uni.$on('updateData', (data) => {
				if (data) {
					console.log('是否启用这个名字', this.titleType)
					this.customerInfoSelect = data
					if (this.customerInfoSelect) {
						uni.setStorageSync('customerInfoSelect', this.customerInfoSelect)
					}
				}
			})

			if (uni.getStorageSync('customerInfoSelect')) {
				this.customerInfoSelect = uni.getStorageSync('customerInfoSelect')
			}
		},
		// // 监听原生导航栏左侧返回事件
		// onBackPress(options) {
		// 	console.log('返回了',options, this.titleType)
		// 	// 返回上一页
		// 	uni.navigateBack({})
		// 	// if(options.from === 'backbutton'){

		// 	// }

		// }, 
		// 监听导航栏右上角的点击事件
		onNavigationBarButtonTap(e) {
			// console.log('监听右上角',this.titleType)
			// 返回上一页
			uni.navigateBack({
				delta: 1, //返回层数，2则上上页
			})
		},
		computed: {
			...mapState(['cartListData'])
		},
		methods: {
			...mapMutations(['setCartListData']),
			// 是否打印小票
			checkboxChange(event) {
				if (event.detail.value.length == 0) {
					// 说明没有选中
					this.isCheckedBox = false
				} else {
					this.isCheckedBox = true
				}
				console.log('选中了', event, this.isCheckedBox)
			},

			// 是否签收
			checkboxChangeQianShou(event) {
				if (event.detail.value.length == 0) {
					// 说明没有选中
					this.isCheckedBoxQianshou = false
				} else {
					this.isCheckedBoxQianshou = true
				}

				console.log('是否签收', this.isCheckedBoxQianshou)
			},
			// 删除顶部客户
			customerDelete() {
				this.isCustomer = false
				uni.removeStorageSync('customerInfoSelect')
			},
			// 选择客户
			customerChangeClick() {
				// 如果禁用不能修改
				if (this.disabled == true) {
					return
				}
				uni.navigateTo({
					url: '/pages/Information/page/Customer?type=ContactPerson'
				})
			},
			// 修改价格弹窗确定事件
			dialogInputConfirm() {
				console.log('确定弹窗', this.objectEdit, this.inputVlaueKeywords, this.title)

				let Quantity = 0
				let Money = 0
				let Price = 0
				let obj = {}
				if (this.title === "修改数量") {
					console.log('修改数量了', this.inputVlaueKeywords)
					Quantity = this.inputVlaueKeywords
					obj = {
						// 当前修改的产品id
						Id: this.objectEdit.Id,
						// 修改后的价格
						// 修改后的价格
						Price: this.objectEdit.Price,
						// 当前修改的产品数量
						Quantity: Quantity ? Number(Quantity) : this.objectEdit.Quantity,
						// 当前修改的产品的钱数
						Money: Quantity ? Quantity * this.objectEdit.Price : this.objectEdit.Quantity * this.objectEdit
							.Price,
						//当前修改的公司id
						CommpayId: uni.getStorageSync('CompanyInfo') ? (uni.getStorageSync('CompanyInfo')).Id : "",
						// 产品id
						InventId: this.objectEdit.InventId

					}
					console.log('修改的数量结果参数', obj)
					this.getEditPricData(obj)
				} else if (this.title === "修改单价") {
					Price = this.inputVlaueKeywords
					console.log('修改单价了', this.inputVlaueKeywords)
					obj = {
						// 当前修改的产品id
						Id: this.objectEdit.Id,
						// 修改后的价格
						Price: Price ? Number(Price) : this.objectEdit.Price,
						// 当前修改的产品数量
						Quantity: this.objectEdit.Quantity,
						// 当前修改的产品的钱数
						Money: Price ? this.objectEdit.Quantity * Number(Price) : this.objectEdit.Quantity * this
							.objectEdit.Price,
						//当前修改的公司id
						CommpayId: uni.getStorageSync('CompanyInfo') ? (uni.getStorageSync('CompanyInfo')).Id : "",
						// 产品id
						InventId: this.objectEdit.InventId,

					}

					console.log('获取修改后的价格', obj)
					this.getEditPricData(obj)
				} else {
					this.newTotalPrice = Number(event)
				}

			},
			// 商品列表修改数量点击事件
			handleChangeClick(type, item, index) {
				// 禁用 不能修改
				if (this.disabled == true) {
					return
				}
				this.title = type
				if (this.title === "修改数量") {
					this.objectEdit = item
					this.inputVlaueKeywords = item.Quantity
				} else if (this.title === "修改单价") {
					this.objectEdit = item
					this.inputVlaueKeywords = item.Price

				} else {
					this.inputVlaueKeywords = this.newTotalPrice ? toThousands(this.newTotalPrice) : '0.00'
				}
				// this.$refs.inputDialog.open()
				this.visible = true
			},

			// 分享面板点击事件
			shareChangeClick(index) {
				this.shareIndex = index
			},

			// 修改数量和单价
			getEditPricData(obj) {
				console.log(obj);
				// 关闭修改弹窗
				this.visible = false
				var that = this
				let goodsArr = JSON.parse(JSON.stringify(this.cartListData))
				goodsArr[goodsArr.findIndex(im => im.Id == obj.InventId)].number = obj.Quantity
				this.setCartListData(goodsArr)
				this.$http('post', '/BO/ShoppingCart/SaveData', obj).then(res => {
					if (res.Success) {
						setTimeout(function() {
							that.$api.msg('已修改')
						}, 1000)
						this.getOrderDetailListData()
					} else {
						this.$api.msg('修改失败')
						// 停止架子状态
						uni.hideLoading();
					}

				})
			},

			// 现收打印小票确定
			submitPrintChange(e) {
				uni.navigateTo({
					url: '/pages/webview/webview?Id=' + this.Id
				})
			},
			// 打印小票取消
			submitPrintDialogClose() {
				// 返回首页
				uni.navigateBack({
					delta: 2
				})
			},
			// 现收
			submitButtonOrderXian(type) {
				// 如果是禁用状态禁止频繁点击
				if (this.disabled == true) {
					return
				}
				this.payType = type
				this.$refs.sharePopup.open();
				let ID = (uni.getStorageSync('CompanyInfo'))
			},

			// 删除列表
			deleteChange(item, index) {
				console.log('删除列表', item, index)
				var arrId = [item.Id]
				console.log('删除id', arrId)
				uni.showModal({
					title: '提示',
					content: '此操作将删除本条单据,确认继续吗?',
					success: (val) => {
						if (val.confirm) {
							uni.showLoading({
								title: '删除中'
							})
							let goodsArr = JSON.parse(JSON.stringify(this.cartListData))
							goodsArr.splice(goodsArr.findIndex(im => im.Id == item.InventId), 1)
							this.setCartListData(goodsArr)
							console.log('删除', val.confirm)
							this.$http('post', '/BO/ShoppingCart/DeleteData', arrId).then(res => {
								this.$api.msg('已删除')
								uni.hideLoading()
								if (!res.Success) return this.$api.msg(res.Msg)
								this.getOrderDetailListData()

							})
						}
					}
				})

			},

			// 赊货
			submitButtonOrderGua(type) {
				// 如果为禁用状态  禁止频繁点击
				if (this.disabled == true) {
					return
				}
				this.payType = type
				var TotalSum = 0
				var TotalQuantity = 0
				this.orderDetailListData.forEach(item => {
					TotalSum += item.Money
					TotalQuantity += item.Quantity
				})
				// 赊货参数
				var obj = {
					Type: 1,
					CustomerId: this.customerInfoSelect.Id,
					PaymentType: '赊货',
					CompanyId: this.CommpayId,
					// 未还金额
					OutstandingSum: TotalSum,
					TotalSum: TotalSum,
					TotalWeight: 0,
					TotalQuantity: TotalQuantity,
					ReceiveSum: 0,
					PendingSum: TotalSum,
					OutstandingSum: TotalSum,
					detaillist: this.orderDetailListData
				}
				this.submitNowClick(obj)
			},


			submitNowClick(obj) {
				uni.showLoading({
					title: '加载中...'
				});
				var that = this
				// this.$refs.print.openForm()
				var params = null
				console.log('获取选择的类型获取选择的类型获取选择的类型', this.payType, this.customerInfoSelect)

				// 赊货
				if (this.payType === '赊货') {
					obj.OutstandingSum = this.newTotalPrice
					obj.PendingSum = this.newTotalPrice
					obj.TotalSum = this.newTotalPrice
					obj.cCusName = this.customerInfoSelect.cCusName ? this.customerInfoSelect.cCusName : "散客",
						params = obj

				}

				// 现收
				if (this.payType === "现收") {
					var TotalSum = 0
					var TotalQuantity = 0
					this.orderDetailListData.forEach(item => {
						TotalSum += item.Money
						TotalQuantity += item.Quantity
					})
					var newobj = {
						// 现收还是赊货
						Type: 0,
						// 现收类型
						shareChangeClick: this.shareIndex,
						cCusName: this.customerInfoSelect.cCusName ? this.customerInfoSelect.cCusName : "散客",
						PaymentType: this.shareIndex == 0 ? '微信' : this.shareIndex == 1 ? '支付宝' : this.shareIndex ==
							2 ? '现金' : '转账',
						CustomerId: this.customerInfoSelect.Id,
						CompanyId: this.CommpayId,
						TotalSum: TotalSum,
						TotalWeight: 0,
						TotalQuantity: TotalQuantity,
						ReceiveSum: TotalSum,
						PendingSum: 0,
						OutstandingSum: 0,
						detaillist: this.orderDetailListData
					}
					params = newobj


					// 隐藏现收按钮
					// this.isXianshouButton = false
				}

				if (this.payType === "赊货") {
					if (!this.customerInfoSelect.Id) {
						// 说明没有选择客户
						this.$api.msg('请先选择客户')
						// 关闭弹窗
						this.$refs.sharePopup.close();
						return
					}

					// 隐藏赊货按钮
					// this.isGuazhangButton = false
				}




				if (this.isCheckedBoxQianshou && !this.customerInfoSelect.Id) return this.$api.msg('请选择客户')

				this.$http('post', '/BO/BIlling/AddBIllingData', params).then(res => {
					// 停止加载状态
					uni.hideLoading();
					if (res.Success) {
						if (this.payType === "现收") {
							console.log('11111');
							this.$api.msg('现收成功')
							if (this.isCheckedBoxQianshou == true) {
								// 传递Billid
								if (this.customerInfoSelect.Id) {
									// 传递Billid
									this.getAppDataByLocationapp(res.Data)
									return
								}
							}
							// 清空vuex客户信息
						} else {
							this.$api.msg('赊货成功')

							if (this.isCheckedBoxQianshou == true) {
								// 传递Billid
								this.getAppDataByLocationapp(res.Data)
								return
							}
							// 清空vuex客户信息
						}
						// 选中打印小票
						if (this.isCheckedBox) {
							if (this.customerInfoSelect.Id) {
								// 传递Billid
								this.getAppDataByLocationapp(res.Data)
								return
							}
							uni.navigateTo({
								url: '/pages/webview/webview?Id=' + res.Data +
									'&billId=null&print=true'
							})
							// this.$navto.navTabbar('/pages/index/index')
							// 清空客户缓存
							uni.removeStorageSync('customerInfoSelect')
							this.disabled = true
							// 清空vuex里的购物车数据
							this.$store.commit('setCartListData', [])
							return
						}


						// 如果选择了是否签收   并且选择了客户id  调用回执单  否则不调用
						// if(this.payType==="赊货"){

						// }

						// // 弹出打印小票的弹窗
						// that.$refs.print.openForm()
						this.Id = res.Data

						// 跳转首页
						this.$navto.navTabbar('/pages/index/index')
						// 清空客户缓存
						uni.removeStorageSync('customerInfoSelect')
						// 清空vuex里的购物车数据
						this.$store.commit('setCartListData', [])

						// 打印小票

					} else {
						this.$api.msg(res.Msg)
						// 停止加载状态
						uni.hideLoading();
					}

				})


			},

			// 打印小票
			getPrintDataMac() {
				this.$http('post', '/BO/PB_Printer/GetPrintData?CompanyId=' + this.CommpayId)
					.then(
						res => {
							if (res.Success && res.Data) {
								this.mac = res.Data.Mac
							} else {
								this.mac = ''
							}
							console.log('获取mac数据', this.mac);
						})
			},






			// 回执单生成
			getAppDataByLocationapp(Billid) {
				uni.showLoading({
					title: '正在生成回执单..'
				})
				this.disabled = true
				var that = this
				let CompanyId = (uni.getStorageSync('CompanyInfo'))
				let cartListDataPrams = this.$store.state.cartListData
				// 最终传递的回执单参数
				var byLocationData = {
					Billid: Billid,
					CustomerId: this.customerInfoSelect.Id,
					Company: CompanyId.Id,
					DomainName: "hzq",
					Content: JSON.stringify({
						BillId: Billid,
						Customer: this.customerInfoSelect.cCusName,
						Subs: JSON.stringify(cartListDataPrams)
					})
				}
				this.$http('post', '/BO/BillList/AppDataByLocation', byLocationData).then(res => {
					if (res.Success) {

						// this.$api.msg('回执单已生成')
						if (this.isCheckedBox) {
							uni.navigateTo({
								url: '/pages/webview/webview?Id=' + Billid + '&billId=' + res.Data +
									'&print=true'
							})
							// 清空客户缓存
							uni.removeStorageSync('customerInfoSelect')
							// 清空vuex里的购物车数据
							this.$store.commit('setCartListData', [])
							return
						}
						uni.switchTab({
							url: '/pages/index/index'
						})
						// 清空客户缓存
						uni.removeStorageSync('customerInfoSelect')
						// 清空购物车列表数据
						that.$store.commit('setCartListData', [])
						// 关闭支付方式弹窗
						that.$refs.sharePopup.close();
						// 追加取消加载延迟  否则中间取消加载消失很快 还没有跳转页面
						setTimeout(function() {
							uni.hideLoading()
						}, 10000)

					} else {
						that.$api.msg(res.Msg)
					}
				})


			},

			// 获取订单列表数据
			getOrderDetailListData() {
				uni.showLoading({
					title: '加载中...'
				});

				this.$http('post', '/BO/ShoppingCart/GetCartDetail', this.queryParmas).then(res => {
					if (res.Success) {

						if (res.Data.length == 0) {
							this.orderDetailListData = []
							// 清空计算总数
							this.newTotalPrice = 0.00

							// 清空客户信息
							this.customerInfoSelect = {}
							uni.removeStorageSync('customerInfoSelect')
							console.log('是否还有货单明细数据了', this.orderDetailListData)
							// 【判断当前货单明细列表是否还存在数据 不存在清空总计
							if (this.orderDetailListData.length == 0) this.totalPrice = 0
						} else {
							this.orderDetailListData = res.Data

							var totalPrice = 0
							// 计算总价
							this.orderDetailListData.forEach(item => {
								totalPrice += item.Quantity * item.Price
							})

							console.log('获取总额', totalPrice)
							this.newTotalPrice = totalPrice
							this.totalPrice = totalPrice
							// uni.stopPullDownRefresh(); //停止刷新
							// 停止加载状态
							uni.hideLoading();

						}
					} else {
						this.orderDetailListData = []
						// 停止加载状态
						uni.hideLoading();
					}

				})
			}
		}
	}
</script>

<style>
	.disabled {
		opacity: 0.5;
	}

	page {
		background-color: #F3F6FB;

	}

	.customerBtn {
		position: fixed;
		z-index: 2;
		width: 100%;
		box-sizing: border-box;
		height: 60px;
		background-color: #fff;
		margin-top: -1px;
	}

	.textOverflow {
		width: 100%;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.avatar {
		max-width: 90rpx;
		max-height: 90rpx;
		margin-right: 10rpx;
	}

	.sharePopup {
		display: flex;
		justify-content: space-around;
		padding: 50rpx 30rpx;
	}

	.sharePopup .sharePopupItem {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-right: 30rpx;
	}

	.sharePopup .sharePopupItem .top {
		/* margin-bottom: 5rpx; */

	}

	.sharePopup .sharePopupItem .top image {
		width: 50rpx;
	}

	.sharePopup .sharePopupItem .bottom {}

	.icon-success {
		display: inline-flex;
		justify-content: center;
		align-items: center;
		width: 18px;
		height: 18px;
		background-color: #FAA717;
		border-radius: 50%;
	}

	.icon-success::after {
		content: '✓';
		color: #fff;
		font-size: 5px;
		font-weight: bold;
	}

	.sideRightimage image {
		width: 120rpx;
		height: 120rpx;
		border-radius: 15rpx
	}

	.slotBody {
		margin-left: 10px;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		width: 100%;
	}

	.sideRightTitle {

		display: flex;
		flex-direction: column;
	}

	.sideRightFooter {
		justify-content: flex-end;
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		/* width: 50%; */
	}

	.submitButton {
		width: 100%;
		height: 90rpx;
		position: fixed;
		/* bottom: 100rpx; */
		bottom: 0;
		height: 200rpx;
		/*暂时发现安卓小屏手机安全区为0 && 不带单位的话padding-bottom会失效，写一个兜底, 并写在最上面；f12发现css样式如果都给height设置样式，会依次往下，用最底下的一个样式，如果最下面的没失效，依次往上查找，所以兜底的写在最上面 */
		height: calc(200rpx + constant(safe-area-inset-bottom));
		/* 直接扩展高度，因为padding-bottom是内边距 */
		height: calc(200rpx + env(safe-area-inset-bottom));
		/* 直接扩展高度 */
		padding-top: 10rpx;
		padding-left: 20rpx;
		padding-right: 20rpx;
		box-sizing: border-box;
		padding-bottom: constant(safe-area-inset-bottom);
		/*兼容 iOS<11.2 */
		padding-bottom: env(safe-area-inset-bottom);
		/* 兼容iOS>= 11.2*/
		left: 0;
		display: flex;
		flex-direction: column;
		background-color: #fff;
	}

	.end-left {}

	.end-center {
		text-align: center;
		flex: 5;
		padding: 25rpx;
		color: #fff;
		background-color: #626262;
	}

	.end-right {
		flex: 5;
		color: #fff;
		padding: 25rpx;
		border-top-right-radius: 50rpx;
		border-bottom-right-radius: 50rpx;
		background-color: #4184EF;
		text-align: center;
	}

	.submitPopup {
		border-top-left-radius: 50rpx;
		border-top-right-radius: 50rpx;
		border-bottom-left-radius: 50rpx;
		text-align: center;
		color: #fff;
		border-bottom-right-radius: 50rpx;
		height: 50rpx;
		padding: 20rpx 0;
		margin: 30rpx;
		background: linear-gradient(45deg, #f72585, #7209b7, #3a0ca3, #4361ee);
	}
</style>